<template>
  <div class="menu-bar-container">
    <!-- logo -->
    <div class="logo" :class="isCollapse?'menu-bar-collapse-width':'menu-bar-width'" :style="{'background':themeColor}">
      <img :src="this.logo" /> <div>{{isCollapse?'':sysName}}</div>
    </div>
    <!-- 导航菜单 -->
    <el-menu default-active="1" :class="isCollapse?'menu-bar-collapse-width':'menu-bar-width'" @open="handleopen" @close="handleclose" @select="handleselect" :collapse="isCollapse">
      <MenuTree v-for="item in menuTree" :key="item.menuId" :menu="item"></MenuTree>
    </el-menu>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import MenuTree from '@/components/MenuTree'
  export default {
    components:{
      MenuTree
    },
    data() {
      return {
        sysName: "",
        logo: "",
      };
    },
    methods: {
      handleopen() {
        console.log('handleopen');
      },
      handleclose() {
        console.log('handleclose');
      },
      handleselect(a, b) {
        console.log('handleselect');
      }
    },
    mounted() {
      this.sysName = "Datuo Frame";
      this.logo = require("@/assets/logo.png");
    },
    computed:{
      ...mapState({
        isCollapse: state=>state.app.collapse,
        themeColor: state=>state.app.themeColor,
        menuTree:state=>state.menu.menuTree
      })
    }
  };
</script>

<style scoped lang="scss">
  .menu-bar-container {
    .el-menu {
      position:absolute;
      top: 60px;
      bottom: 0px;
      text-align: left;
    }
    .logo {
      position:absolute;
      top: 0px;
      height: 60px;
      line-height: 60px;
      background: #4b5f6e;
      img {
        width: 40px;
        height: 40px;
        border-radius: 0px;
        margin: 10px 10px 10px 10px;
        float: left;
      }
      div {
        font-size: 22px;
        color: white;
        text-align: left;
      }
    }
    .menu-bar-width {
      width: 200px;
    }
    .menu-bar-collapse-width {
      width: 65px;
    }
  }
</style>
